import React, { useState } from "react";
import { Route, Switch, useHistory } from "react-router-dom";
import { Layout, Menu, Breadcrumb, Avatar, Badge, Empty, Image,Tooltip,Button } from "antd";
import {
  DesktopOutlined,
  PieChartOutlined,
  FileOutlined,
  TeamOutlined,
  UserOutlined,
  SearchOutlined,
  BellOutlined,
} from "@ant-design/icons";
import Data from "../../components/Data/Data";
import From from "../../components/From/From";
import Personal from "../Personal/Personal";
import Add_the_goods from "../../components/Add_the_goods/Add_the_goods";
import compile from "../../components/Compile/Compile";
import "./style.css";

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

export default function Home(props) {
  let history = useHistory();
  const [collapsed, setCollapsed] = useState(false);
  const text = <Button type="primary" onClick={()=>{history.push('/')}}>退出登录</Button>;

  const onCollapse = (e) => {
    console.log("展开收起的回调", e);
    setCollapsed(e);
  };

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
        <div
          className="logo"
          style={{
            height: "32px",
            margin: "16px",
            background: "rgba(255, 255, 255, 0.3)",
          }}
        />
        <Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline">
          <Menu.Item
            key="1"
            icon={<PieChartOutlined />}
            onClick={() => {
              history.push("/home/data");
            }}
          >
            数据
          </Menu.Item>
          <Menu.Item
            key="2"
            icon={<DesktopOutlined />}
            onClick={() => {
              history.push("/home/from");
            }}
          >
            表单
          </Menu.Item>
          <SubMenu key="sub1" icon={<FileOutlined/>} title="文档">
            <Menu.Item key="3">Tom</Menu.Item>
            <Menu.Item key="4">Bill</Menu.Item>
            <Menu.Item key="5">Alex</Menu.Item>
          </SubMenu>
          <SubMenu key="sub2" icon={<TeamOutlined />} title="群聊记录">
            <Menu.Item key="6">Team 1</Menu.Item>
            <Menu.Item key="8">Team 2</Menu.Item>
          </SubMenu>
          <Menu.Item key="9" icon={<UserOutlined />} onClick={()=>{history.push('/home/pers')}}>
          个人信息
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout className="site-layout">
        <Header className="site-layout-background" style={{ padding: 0 }}>
          <ul className="Head_etc">
            <li>
              <SearchOutlined />
            </li>
            <li>
              <Badge count={5}>
                {/* <Avatar shape="square" size="large" /> */}
                <BellOutlined />
              </Badge>
            </li>
            <li>
            <Tooltip placement="bottom" title={text} color="#fff">
              <Avatar
                src={
                  <Image
                    src="https://joeschmoe.io/api/v1/random"
                    style={{
                      width: 32,
                    }}
                  />
                }
              />
              </Tooltip>
            </li>
          </ul>
        </Header>
        <Content style={{ margin: "0 16px" }}>
          <Breadcrumb style={{ margin: "16px 0" }}>
            <Breadcrumb.Item>home</Breadcrumb.Item>
            <Breadcrumb.Item>
              {props.location.pathname.slice(6, 10)}
            </Breadcrumb.Item>
            <Breadcrumb.Item>
              {props.location.pathname.slice(11)}
            </Breadcrumb.Item>
          </Breadcrumb>
          <div
            className="site-layout-background"
            style={{ padding: 24, minHeight: 360 }}
          >
            <Switch>
              <Route path="/home/data/compile" component={compile} />
              <Route
                path="/home/data/add_the_goods"
                component={Add_the_goods}
                title="添加商品"
              />
              <Route path="/home/pers" component={Personal}/>
              <Route path="/home/data" component={Data} title="数据" />
              <Route path="/home/from" component={From} title="表单" />
            </Switch>
          </div>
        </Content>
        <Footer style={{ textAlign: "center" }}>
          Ant Design ©2018 Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
}
